<template>
  <div style="width: 100%;">
    
    <div style="padding-top:20px;background-color:white;padding-left:10px;margin-left:200px">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model="form.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="分类" :label-width="formLabelWidth">
          <el-select v-model="form.type" clearable placeholder="请选择">
            <el-option
              v-for="type in types"
              :key="type.id"
              :label="type.name"
              :value="type.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-button>你好</el-button>
    <div>
      <el-table :data="tableData" style="width: 1010px;margin-left:200px" disabled border max-height="100vh" stripe>
        <el-table-column prop="id" fixed="left" width="150px"></el-table-column>
        <el-table-column prop="name" label="名称" width="200px" style="overflow: hidden;"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="suggestion" label="推荐" width="100px"></el-table-column>
        <el-table-column prop="status" label="状态" ></el-table-column>

        <el-table-column prop="date" label="时间" width="100px"></el-table-column>
        <el-table-column
          fixed="right"
          label="操作" width="150px">
          <template slot-scope="scope">
            <el-popconfirm
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="deleteBlog(scope.row.id)"
            >
              <el-button slot="reference" size="small" style="border: 1px rgba(245, 6, 6, 0.867) solid;">删除</el-button>
            </el-popconfirm>
            <el-button
              @click="updaterow(scope.row.id)"
              size="small" style="border: 1px rgba(6, 173, 245, 0.867) solid;">
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <el-pagination
      background
      @current-change="page"
      layout="prev, pager, next"
      :total="blogNumber"
      :page-count="blogPage"
      :page-size="7"
      style="margin-top: 10px;margin-left:30%">
    </el-pagination>    
    
  </div>
</template>

<script>
import request from '../../utils/request'
import PPUtil from '@/components/PPUtil.vue'
export default {
    name: 'BlogList',
    data() {
        return {
            formLabelWidth: '40px',
            tableData: [],
            form: {
                title: '',
                type: ''
            },
            types: [],
            blogNumber: 0,
            blogPage: 0,
            currentPage: 0
        };
    },
    components:{PPUtil},
    created() {
        setTimeout(() => {
            request.get('/admin/types').then((res) => {
                if (res.code == '200') {
                    this.types = res.data.list;
                }
                else {
                    this.$notify.error("获取分类失败");
                }
            });
        }, 3000);
        this.getBlogs();
    },
    methods: {
        onSubmit() {
            if (this.form == '') {
                this.getBlogs();
            }
            request.post('/admin/search', this.form).then((res) => {
                if (res.code == '200') {
                    this.tableData = res.data.list;
                    this.blogNumber = res.data.total;
                    this.blogPage = this.blogNumber / 7;
                    console.log(res.data.total);
                }
                else {
                    this.$notify.error("获取搜索内容失败");
                    this.getBlogs();
                }
            });
        },
        filterStatus(value, row) {
            return row.status === value;
        },
        deleteBlog(val) {
            request.get(`/admin/delete?id=${val}`).then((res) => {
                if (res.code == '200') {
                    this.$notify.success(res.msg);
                    this.getBlogs();
                }
                else {
                    this.$notify.error(res.msg);
                }
            });
        },
        updaterow(val) {
        },
        getBlogs() {
            request.get('/admin/blogs').then((res) => {
                if (res.code == '200') {
                    this.tableData = res.data.list;
                    this.blogNumber = res.data.total;
                    this.blogPage = (this.blogNumber % 7 == 0 ? (this.blogNumber % 7) : (this.blogNumber % 7 + 1));
                }
                else {
                    this.$notify.error("获取博客列表失败");
                }
            });
        },
        page(val) {
            request.get(`/admin/pageBlog?pageNum=${val}`).then((res) => {
                if (res.code == '200') {
                    this.tableData = res.data.list;
                    this.currentPage = val;
                    console.log(res);
                    console.log(this.tableData);
                }
                else {
                    this.$notify.error("获取博客列表失败");
                }
            });
        }
    },
    components: { PPUtil }
}
</script>

<style scoped>
</style>